<template>
  <el-dialog :visible="show" append-to-body title="新增/编辑" :before-close="close">
    <el-form ref="form" :model="form" label-width="120px" :rules="rules">
      <!-- <el-form-item label="调班类型" prop="type">
        <el-select v-model="form.type" placeholder="请选择调班类型">
          <el-option label="临时调班" :value="1"></el-option>
          <el-option label="固定调班" :value="2"></el-option>
        </el-select>
      </el-form-item> -->
      <el-form-item label="调班人员" prop="targetMemberId">
        <SelectByApi v-model="form.targetMemberId" :label.sync="form.targetMemberName" :options="options"></SelectByApi>
      </el-form-item>
      <!-- <el-form-item label="调班班组" prop="shiftTeamId">
        <SelectByApi v-model="form.shiftTeamId" :label.sync="form.shiftTeam" :api="classList" :params="{pageSize: 999}"></SelectByApi>
      </el-form-item> -->
      <el-form-item label="顶班人员" prop="replaceMemberId">
        <SelectByApi v-model="form.replaceMemberId" :label.sync="form.replaceMemberName" :options="options"></SelectByApi>
      </el-form-item>
      <el-form-item label="调班原因" prop="reason">
        <el-input v-model="form.reason" type="textarea" :rows="3" placeholder="请输入调班原因"></el-input>
      </el-form-item>
      <!-- <el-form-item v-if="form.type == 2" label="生效时间" prop="forceTime" :rules="[{required: form.type == 2, message: '请选择生效时间', trigger: 'change'}]">
        <el-date-picker v-model="form.forceTime" type="date" value-format="yyyy-MM-dd" placeholder="选择日期" />
      </el-form-item> -->
      <el-form-item v-if="form.type == 1" label="调班时间" prop="replaceDay" :rules="[{required: form.type == 1, message: '请选择调班时间', trigger: 'change'}]">
        <SelectCalendar v-model="form.replaceDay"></SelectCalendar>
      </el-form-item>
    </el-form>

    <div slot="footer" class="dialog-footer">
            <el-button @click="close">取 消</el-button>
            <el-button type="primary" @click="submit">确 定</el-button>
        </div>
  </el-dialog>
</template>
<script>
import SelectCalendar from "@/components/SelectCalendar";
import { memberList } from "@/api/user";
import { classList } from "@/api/classGroup";
import { add, update } from '@/api/classSwitch'


export default {
  components: { SelectCalendar },
  props: {
    show: Boolean,
    item: { type: Object, default: () => ({}) },
  },
  watch: {
    show: {
      handler(val) {
        if (val) {
          this.form = Object.assign({type: 1},this.item)
          this.$set(this.form, 'type', this.item.type ? Number(this.item.type):1)
          this.$set(this.form, 'shiftTeamId', this.item.shiftTeamId ? Number(this.item.shiftTeamId):null)
          this.$set(this.form, 'shiftPersonId', this.item.shiftPersonId ? Number(this.item.shiftPersonId):null)
          this.$set(this.form, 'topShiftPersonId', this.item.topShiftPersonId ? Number(this.item.topShiftPersonId):null)
          this.memberList();
        }
      },
      immediate: true,
    },
  },
  data() {
    return {
      form: {type: 1},
      rules: {
        type: { required: true, message: "请选择类型", trigger: "change" },
        shiftPersonId: { required: true, message: "请选择调班人员", trigger: "change" },
        shiftTeamId: { required: true, message: "请选择调班班组", trigger: "change" },
        topShiftPersonId: { required: true, message: "请输入顶班人员", trigger: "change" },
        reason: { required: true, message: "请输入调班原因", trigger: "blur" },
      },
      options: [],
    };
  },
  methods: {
    classList,
    async memberList() {
      try {
        const res = await memberList({pageSize: 999});
        this.options = res.data;
      } catch (error) {}
    },
    close() {
        this.$refs["form"].resetFields();
        this.$emit("update:show", false);
    },
    submit() {
        this.$refs["form"].validate(async (valid) => {
            if(valid) {
                const res = this.form.id ? await update(this.form) : await add(this.form);
                this.$emit('confirm', this.form)
                this.close()
            }
        })
    }
  },
};
</script>